<template>
	<view class="refund-box">
		<view class="inputbox">
			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						申请理由
					</view>
					<text>*</text>
				</view>

				<!-- <picker mode="selector" :range="reasons" >
					<view class="text">{{rIndex > -1 ? reasons[rIndex] : '请选择'}}</view>
				</picker> -->
				<input type="text" class="text" placeholder-class="text" placeholder="请输入申请理由" v-model="title">
			</view>
			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						退票原因
					</view>
					<text>*</text>
				</view>

				<input type="text" class="text" placeholder-class="text" placeholder="请输入" v-model="desc">
			</view>
		</view>
		<view class="subbox">
			<text @tap="modalShow = true">确认退票</text>
		</view>
		
		<view class="model">
			<u-modal :show="modalShow" :title="tit" :content='content' :showConfirmButton='true'
				:showCancelButton='true' @confirm='onSubmit' @cancel="modalShow=false"></u-modal>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				reasons: ['1'],
				modalShow: false,
				title: '',
				desc: '',
				tit: '是否申请退票',
				content: '此操作不可逆',
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.id || ''
		},
		methods:{
			onSubmit(){
				if(!this.title){
					this.$common.errorToShow('请输入申请理由')
					return
				}
				
				if(!this.desc){
					this.$common.errorToShow('请输入退票原因')
					return
				}
				
				this.$api.default.request('invoice/InvoiceRef',{
					id: this.id,
					title: this.title,
					desc: this.desc
				}).then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg,()=>{
							uni.navigateBack({
								delta: 2
							})
						})
					}else{
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>


<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.refund-box {

		.inputbox {
			padding: 0 30rpx;
			background-color: #fff;
		}

		.box1-item {
			padding: 30rpx 0;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);

			.box1-left {
				font-family: Source Han Sans CN;
				font-size: 14px;
				color: #3D3D3D;

				text {
					color: #FF0000;
				}
			}
			
			.text{
				font-family: '思源黑体';
				font-size: 14px;
				color: #999999;
				text-align: right;
			}
		}
	}

	.subbox {
		position: fixed;
		bottom: 0;
		left: 0;
		padding-top: 10px;
		padding-bottom: calc(var(--window-bottom) + 10px);
		background-color: #fff;
		display: flex;align-items: center;
		justify-content: center;
		width: 100%;
		
		text{
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			opacity: 1;
			background: #45C4B0;
			text-align: center;
			line-height: 86rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	/deep/.u-modal{
		width: 267px!important;
	}
	
	.model {
		background-color: #fff;
	
		.u-popup__content {
			background-color: #FFFFFF !important;
	
			.u-modal__content__text {
				text-align: center;
			}
		}
	}
</style>